/*
  @ 名称: 翻转90度
  @ 用法: 添加 .sl-rotate, 默认为顺时针旋转90度, 逆时针翻转需添加 .sl-rotate-90ccw
  @ 用法: 
    
    默认: <span class="sl-rotate sl-rotate-90">顺时针转一下</span>
      <span class="sl-rotate sl-rotate-90cw">顺时针转一下</span>
      <span class="sl-rotate sl-rotate-90ccw">逆时针转一下</span>
    
*/

@mixin ms-rotate($n: 1) {
  $DXIT: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$n})';

  filter: unquote($DXIT);
  -ms-filter: $DXIT;
}


.sl-rotate {
  zoom: 1;
}

/* for inline elements */
em.sl-rotate {
  display: inline-block;
}
@each $tag in span, cite, strong, abbr, li {
  #{$tag}.sl-rotate {
    @extend em.sl-rotate;
  }
}

/* 逆时针 */
.sl-rotate-90ccw {
  @include ms-rotate(3);
  @include transform(rotate(-90deg));
}

/* 顺时针 */
.sl-rotate-90cw, .sl-rotate-90 {
  @include ms-rotate;
  @include transform(rotate(90deg));
}